<template>
  <!-- 新增部门的弹层 -->
  <el-dialog :title="title" :visible="dialogVisible" :before-close="handleClose">
    <!-- 表单组件  el-form   label-width设置label的宽度   -->
    <!-- 匿名插槽 -->
    <el-form ref="deptForm" label-width="120px" :model="form" :rules="formRules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="form.code" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <!-- 通过接口返回的数据渲染部门负责人的下拉框 -->
        <!-- 1 查询文档找到员工接口
             2 在api中定义接口
             3 在当前文档中引入接口
             4 在created中调用接口获取数据
             5 数据的赋值
             6 通过
         -->
        <el-select v-model="form.manager" style="width:80%" placeholder="请选择">
          <el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item.username" />

        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="form.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
      </el-form-item>
    </el-form>
    <!-- el-dialog有专门放置底部操作栏的 插槽  具名插槽 -->
    <div slot="footer">
      <el-button type="primary" size="small" :loading="loading" @click="submit">确定</el-button>
      <el-button size="small">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getUserSimpleAPi, addDepartmentAPI, getDepartmentDetailAPI, reqUpdateDepartmentsAPI } from '@/api'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    // 全量的部门数据
    list: {
      type: Array,
      default: () => []
    },
    // 当前新增的部门的数据
    nodeData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    // 自定义效验
    // 根据当前的节点id 找到所有的子节点
    // 在子节点中便利查找是否有重名的
    // 准备当前全量的部门数组，在父组件中通过接口获取
    // 准备在哪里添加的子节点 子组件 tree-tools获取到当前的节点数据=》父组件=》dept-add组件中
    const checkNameRepeat = (rule, value, callback) => {
      // rule:校验规则
      // value: 表单上双向数据绑定的值
      // console.log(this.list);
      // 因为添加的子节点 所以要找他的兄弟
      // 根据当前节点的节点id查找所有的子节点 子的pid=== 父的id
      let arr = []
      if (this.form.id) { // 如果有id 就是修改
        // 修改
        if (this.nodeData.name === value) { // 如果名字相同
          callback()
          return
        }
        // 找兄
        arr = this.list.filter(item => this.nodeData.pid === item.pid)
      } else {
        // 新增 找子 过滤出 返回的全部数据的 每条数据的 pid 和现在选中的这条数据的id相等的 都是这条数据的孩子
        arr = this.list.filter(item => this.nodeData.id === item.pid)
      }
      //  如果有一个满足 则返回true 遍历 这条数据的孩子的名字 是不是和输入框(value)的相同
      const flag = arr.some(item => item.name === value)
      if (flag) {
        callback(new Error(`已经存在名字为${value}的部门了`))
      } else {
        callback()
      }
    }
    // console.log(this.nodeData.id)
    // 在当前节点的子节点中查找是否有重复的元素，如果有则返回错误

    // 效验部门编码
    // 在整个部门数组数据中查找有没有重复的code 使用some some的返回值是不是布尔类型
    const checkCodeRepeat = (rul, value, callback) => {
      if (this.form.id && this.nodeData.code === value) { // 如果有 就是编辑
        callback()
        return
      }
      // 新增验证
      const flag = this.list.some(item => item.code === value)
      flag ? callback(new Error(`已经存在名字为${value}的编码了`)) : callback()
    }
    return {
      loading: false, // 弹框状态
      // 表单数据
      form: {
        name: '', // 部门名称
        code: '', // 部门编码，同级部门不可重复
        manager: '', // 负责人名称
        introduce: '' // 介绍
        // pid: ''// 父级部门ID
      },
      // 验证规则
      formRules: {
        name: [
          { required: true, message: '部门名称不能为空', tigger: ['blur', 'change'] },
          { min: 1, max: 50, message: '部门名称要求1~50个字符', tigger: ['blur', 'change'] },
          { validator: checkNameRepeat, tigger: 'blur' }
        ],
        code: [
          { required: true, message: '部门编码不能为空', tigger: ['blur', 'change'] },
          { min: 1, max: 50, message: '部门编码要求1~5个字符', tigger: ['blur', 'change'] },
          { validator: checkCodeRepeat, tigger: 'blur' }

        ],
        manager: [
          { required: true, message: '负责人名称不能为空', tigger: ['blur', 'change'] }

        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', tigger: ['blur', 'change'] },
          { min: 1, max: 300, message: '部门介绍要求1~300个字符', tigger: ['blur', 'change'] }
        ]

      },
      // 员工基本信息
      userList: []
    }
  },

  computed: {
    title() {
      if (this.form.id) {
        return '编辑部门'
      } else {
        return '新增部门'
      }
    }

  },
  created() {
    this.getUserList()
  },

  methods: {
    // 点击关闭回调
    handleClose() {
      this.$emit('close')
      // 负责移除表单校验的
      this.$refs.deptForm.resetFields()
      // 初始化数据
      this.form = {
        code: '',
        introduce: '',
        manager: '',
        name: ''
      }
    },
    // 获取员工简单列表
    async getUserList() {
      const { data } = await getUserSimpleAPi()
      // console.log(data)
      this.userList = data
    },
    // 表单的提交
    // 1 找到提交的接口
    // 2 确定提交的参数
    // 3 在api中声明接口
    // 4 在文件中将接口引入
    // 5 给确定绑定一个提交数据
    // 6 在methods 中先进行
    submit() {
      // 兜底验证
      this.$refs.deptForm.validate(async(valid) => {
        if (valid) {
          // 如果有id就是编辑 没有就是添加
          // 通过后先打开弹窗 因为要回显请求
          this.loading = true
          if (this.form.id) {
            await reqUpdateDepartmentsAPI(this.form)
          } else {
            await addDepartmentAPI({ ...this.form, pid: this.nodeData.id })
          }
          this.$message.success(`${this.title}成功了`)// 提示信息
          this.handleClose() // 关闭弹窗 (已废弃)
          // 通知父组件调用数据列表接口 重新刷新页面
          this.$emit('add-dept')
          this.loading = false// 做完之后关闭弹窗
        } else {
          return false
        }
      })
    },
    // 获取详情
    async getDetail(id) {
      const { data } = await getDepartmentDetailAPI(id)
      console.log(data)
      this.form = data // 回显
    }
  }
}
</script>

<style>

</style>
